<template>
    <div class="background" style="font-family: kaiti">
        <div class="login-box">
            <center><h1 style="color: #909399">欢迎登录</h1></center>
            <el-form v-model="admin" ref="loginFrom">
                <el-form-item prop="num">
                    <el-input placeholder="请输入账号" type="text" prefix-icon="el-icon-user-solid" v-model="admin.num"
                              style="margin:20px 0"/>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input placeholder="请输入密码" type="password" prefix-icon="el-icon-unlock"
                              v-model="admin.password"/>
                </el-form-item>
                <el-form-item>
                    <el-button class="btn" @click="login">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import request from "@/request";

export default {
    name: "login.vue",
    data() {
        return {
            admin: {}
        }
    },
    methods: {
        login() {
            request.post('/login', this.admin).then(res => {
                if (res.code === "200") {
                    this.$notify.success("登录成功！")
                    if (res.data.power == 1) {
                        this.$router.push("/systemadmin")
                    } else if (res.data.power == 2) {
                        this.$router.push("/receptionadmin")
                    } else if (res.data.power == 3) {
                        this.$router.push("/chefadmin")
                    } else if (res.data.power == 4) {
                        this.$router.push("/waiteradmin")
                    }
                } else {
                    this.$notify.error(res.msg)
                }
            })
        }

    }
}
</script>

<style scoped>
* {
    margin: 0;
    border: 0;
    padding: 0;
}

.background {
    background: url("../../assets/bg.jpg");
    width: 100%;
    height: 100%; /**宽高100%是为了图片铺满屏幕 */
    position: fixed;
    background-size: 100% 100%;
}

.login-box {
    border: 1px solid #dccfcf;
    width: 350px;
    height: 250px;
    margin: 180px auto;
    padding: 20px 50px 20px 50px;
    border-radius: 5px;
    box-shadow: 0 0 25px #909399;
    background-color: rgba(255, 255, 255, 0.7);
}

.btn {
    width: 100%;
    height: 35px;
    margin-top: 30px;
    background-color: beige;
    font-size: 20px;
}
</style>